<template>
	<view class="flex center flex-wrap-line">
		
		<image :src="img" mode="" v-for="(img,index) in refundimage" :key='index' class="itemImg" @click="previewImg(img,refundimage)"></image>
		
		<view class="flex center flex-direction-column justify-center addImg" style="border: 1px dashed #c9c9c9;" v-if="refundimage.length < maxLength" @click="chooseImage">
			<view class="c999 pfscm f24" v-if="showText">{{showText}}</view>
			<view class="" v-else style="color: #c9c9c9;font-size: 60rpx;">
				+
			</view>
			
		</view>
		<hx-preview-img :list.sync="imgList" :current.sync="showImg" :start.sync="imgIndex"></hx-preview-img>
	</view>
</template>
<script>
	import hxPreviewImg from "@/components/hx-preview-img/hx-preview-img.vue";
	export default {
		props: {
			refundimage: {
				type: Array,
				default: ()=>{
					return [];
				}
			},
			maxLength:{
				type: Number,
				default: 3
			},
			showText:{
				type: String,
				default: ''
			}
			
		},
		data() {
			return {
				imgIndex:0,
				imgList: [], 	//图片预览列表
				showImg:'',		//显示的第一张图片
			}
		},
		components:{
			hxPreviewImg
		},
		methods: {
			chooseImage() {
				let _this = this;
				let count = _this.maxLength - _this.refundimage.length;
				uni.chooseImage({
					count: count,
					sizeType: ['compressed '],
					sourceType: [],
					success: (res) => {
						console.log(res)
						var imageSrc = res.tempFiles;
						var tempImgList = [];
						var i = 0;
						readUrl(imageSrc);
						
						function readUrl (imgList){
							
							if(imgList && imgList[i]){
								var reader = new FileReader();
								reader.readAsDataURL(imgList[i]);
								reader.onload = function(){
									tempImgList.push(reader.result);
									++i;
									if(imgList[i]){
										readUrl(imgList);
									}else{
										_this.$emit('uploadSuccess',tempImgList);
									}
									
								};
							}
						}
						
						
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			//预览图片
			previewImg(imgSrc,list){
				this.showImg = imgSrc;
				this.imgList = list;
				this.imgIndex++;
			},
		}
	}
</script>

<style lang="scss">
.addImg{
	width: 158rpx;
	height: 158rpx;
	border: 1px dashed #999999;
}
.itemImg{
	width: 160rpx;
	height: 160rpx;
	margin-right: 20rpx;
}
</style>
